<template>
  <div class="workbench-container">
    <div class="page-header">
      <h2 class="page-title">指引</h2>
      <p class="page-subtitle">快速访问您有权限使用的功能模块</p>
    </div>

    <div class="modules-grid">
      <el-card
        v-for="module in userModules"
        :key="module.id"
        class="module-card"
        shadow="hover"
        @click="handleModuleClick(module)"
      >
        <template #header>
          <div class="card-header">
            <el-icon class="module-icon" :size="28">
              <component :is="module.icon" />
            </el-icon>
            <span class="module-name">{{ module.name }}</span>
          </div>
        </template>
        <div class="card-body">
          <p class="module-description">{{ module.description }}</p>
          <div class="module-features">
            <el-tag
              v-for="(feature, index) in module.features"
              :key="index"
              class="feature-tag"
              size="small"
            >
              {{ feature }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Operation,
  Box,
  Document,
  ShoppingCart,
  DataAnalysis,
  Setting,
  User,
  Files,
  List,
  Grid,
} from '@element-plus/icons-vue'

const router = useRouter()

const userModules = ref([
  {
    id: 1,
    name: '生产管理',
    description: '全面的生产计划与执行管理，包括生产工单、进度跟踪、委外加工等',
    icon: Operation,
    features: ['生产工单', '生产进度', '委外加工', '甘特图'],
    url: '/scheduling',
  },
  {
    id: 2,
    name: '库存管理',
    description: '高效的库存管理与控制，实时查询库存、出入库管理、库存盘点等',
    icon: Box,
    features: ['库存查询', '出入库', '库存盘点', '库存预警'],
    url: '/',
  },
  {
    id: 3,
    name: 'BOM 管理',
    description: '物料清单与工艺管理，BOM 结构管理、物料清单维护、工艺路线配置',
    icon: Document,
    features: ['BOM 结构', '物料清单', '工艺路线', '版本控制'],
    url: '/BOMdetails',
  },
  {
    id: 4,
    name: '采购管理',
    description: '采购订单管理、供应商管理、采购计划与执行跟踪',
    icon: ShoppingCart,
    features: ['采购订单', '供应商', '采购计划', '执行跟踪'],
    url: '/',
  },
  {
    id: 5,
    name: '数据大屏',
    description: '实时数据可视化分析，生产数据大屏、库存数据监控、关键指标分析',
    icon: DataAnalysis,
    features: ['生产数据', '库存监控', '设备状态', '指标分析'],
    url: '/',
  },
  {
    id: 6,
    name: '系统设置',
    description: '系统配置与管理，用户权限、系统参数、基础数据维护',
    icon: Setting,
    features: ['用户权限', '系统参数', '基础数据', '系统维护'],
    url: '/',
  },
  {
    id: 7,
    name: '个人信息',
    description: '个人账户信息管理，基本信息维护、密码修改',
    icon: User,
    features: ['基本信息', '修改密码', '账户设置'],
    url: '/home/userinfo',
  },
  {
    id: 8,
    name: '文档管理',
    description: '文档上传、下载、分类管理，支持多种文档格式',
    icon: Files,
    features: ['文档上传', '文档下载', '分类管理', '格式支持'],
    url: '/',
  },
  {
    id: 9,
    name: '报表中心',
    description: '各类业务报表生成与查看，数据统计分析、报表导出',
    icon: List,
    features: ['业务报表', '数据统计', '报表导出', '数据分析'],
    url: '/',
  },
  {
    id: 10,
    name: '工作流',
    description: '业务流程管理，审批流程配置、流程监控、流程统计',
    icon: Grid,
    features: ['流程配置', '流程监控', '流程统计', '审批管理'],
    url: '/',
  },
])

const handleModuleClick = (module: any) => {
  if (module.url) {
    router.push(module.url)
  }
}
</script>

<style scoped>
.workbench-container {
  padding: 24px;
  background: #f3f5f7;
  min-height: 100%;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.module-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.module-icon {
  color: rgba(0, 82, 217, 1);
  flex-shrink: 0;
}

.module-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.card-body {
  padding: 8px 0;
}

.module-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0 0 16px 0;
  min-height: 44px;
}

.module-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  background-color: #f0f2f5;
  color: #606266;
  border: none;
  font-size: 12px;
}

@media (max-width: 768px) {
  .workbench-container {
    padding: 16px;
  }

  .modules-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-title {
    font-size: 24px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1920px) {
  .modules-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
